<template>
  <view class="chat-header">
    <view class="header-left">
      <view class="back-btn" @click="goBack">
        <FeatherIcon name="chevron-left" size="24" color="#333" />
      </view>
      <text class="node-name">摸鱼派聊天室-{{ nodeName }}</text>
    </view>
    <view
      class="connection-badge"
      :class="connectionStatusClass"
      @click="manualReconnect"
    >
      <text>{{ connectionStatusText }}</text>
      <FeatherIcon
        v-if="connectionStatus === 'disconnected'"
        name="refresh-cw"
        size="16"
        color="#ff4d4f"
      />
    </view>
    <view class="online-count" @click="toggleUserList">
      <text>在线: {{ onlineCount }}</text>
      <FeatherIcon name="chevron-down" size="16" color="#666" />
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";

const props = defineProps({
  connectionStatus: {
    type: String,
    default: "disconnected", // 'connecting', 'connected', 'disconnected'
  },
  nodeName: {
    type: String,
    default: "",
  },
  onlineCount: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["back", "reconnect", "toggle-user-list"]);

// 连接状态样式
const connectionStatusClass = computed(() => {
  return {
    connected: props.connectionStatus === "connected",
    connecting: props.connectionStatus === "connecting",
    disconnected: props.connectionStatus === "disconnected",
  };
});

// 连接状态文本
const connectionStatusText = computed(() => {
  switch (props.connectionStatus) {
    case "connected":
      return "已连接";
    case "connecting":
      return "连接中...";
    case "disconnected":
      return "已断开";
    default:
      return "未知";
  }
});

// 返回上一页
const goBack = () => {
  emit("back");
};

// 手动重连
const manualReconnect = () => {
  if (props.connectionStatus === "disconnected") {
    emit("reconnect");
  }
};

// 切换用户列表
const toggleUserList = () => {
  emit("toggle-user-list");
};
</script>

<style lang="scss" scoped>
.chat-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 30rpx;
  height: 90rpx;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  z-index: 100;
  padding-top: 50rpx;

  .header-left {
    display: flex;
    align-items: center;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      border-radius: 50%;

      &:active {
        background-color: #f0f0f0;
      }
    }

    .node-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .connection-badge {
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &.connected {
      background-color: #ecf9ee;
      color: #42b983;
    }

    &.connecting {
      background-color: #f0f9ff;
      color: #1890ff;
    }

    &.disconnected {
      background-color: #fff0f0;
      color: #ff4d4f;
      cursor: pointer;

      &:active {
        opacity: 0.8;
      }
    }

    :deep(FeatherIcon) {
      margin-left: 6rpx;
    }
  }

  .online-count {
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 32rpx;
    background-color: #f5f5f5;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20rpx;
  }
}
</style>
